<template>
    <a-space>
        <PublishRuleOrArtSelectOptions
            v-model:custom-identifier="customIdentifier"
            v-model:art-wyc="artWyc"
            v-model:rule-type="ruleType"
            v-model:publish-type="publishTypeId"
            v-model:create-id="createId"
        />
        状态<a-radio-group v-model:value="status" option-type="button" :options="statusOptions" />
    </a-space>
    <a-space style="margin-top: 10px">
        时间区间<a-range-picker
            v-model:value="startAndEndDate"
            :presets="rangePresets"
            style="width: 400px"
            :show-time="{
                hideDisabledOptions: true,
                defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')]
            }"
            format="YYYY-MM-DD HH:mm:ss"
        />
        <a-input placeholder="输入网站域名" v-model:value="domain"></a-input>
        <a-input placeholder="输入规则名" v-model:value="ruleName"></a-input>
        <a-input placeholder="输入文章标题" style="width: 200px" v-model:value="title"></a-input>
        <a-button type="primary" @click="searchFunc" :loading="searchLoading" style="width: 140px">
            <template #icon><SearchOutlined /></template>
            搜索
        </a-button>
    </a-space>
    <br />
    <a-typography-paragraph>
        <blockquote>
            应有队列数:
            <a-typography-text strong type="warning">
                {{ currentDayTaskNum }}
            </a-typography-text>
            实际总数:
            <a-typography-link strong>
                {{ currentDaypublishedArticleTotal }}
            </a-typography-link>
            还剩:
            <a-typography-text type="success" strong>{{ currentDaypublishedArticleNum }}</a-typography-text>
            <reload-outlined @click="onReload" style="font-size: 14px; margin-left: 15px" :spin="reloadSpin" />
        </blockquote>
    </a-typography-paragraph>

    <a-spin :spinning="tableLoading" :style="spinStyle">
        <a-table
            style="margin-top: 10px"
            sticky
            :columns="computedColumns"
            :data-source="tableData"
            @change="handleTableChange"
            bordered
            :pagination="false"
            size="small"
            class="table"
        >
        </a-table>
        <br />
        <a-row justify="center" v-if="total > size">
            <a-pagination
                v-model:current="page"
                v-model:pageSize="size"
                show-quick-jumper
                :total="total"
                @change="pageChange"
                :show-total="(total:number) => `总计 ${total} 项`"
            />
        </a-row>
    </a-spin>
</template>

<script lang="ts" setup>
    import { publishedArticleApi } from "@/api/esArticle";
    import { message } from "ant-design-vue";
    import type { TableProps } from "ant-design-vue";
    import { useDateRangePresets, useSpinLoadingState } from "@/hooks/useCommon";
    import type { TableData } from "@/hooks/usePublishedArticle";
    import { useDataFormat, useColumns } from "@/hooks/usePublishedArticle";
    import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";
    import dayjs from "dayjs";
    import type { Dayjs } from "dayjs";
    import { dayPublishedArticleCountApi } from "@/api/esArticle";
    import { PublishRuleOrArtSelectOptions } from "@/components/home/tsx/commonComponents";
    import { useCommonAsyncOptions } from "@/hooks/useEsArticleCommon";
    const { isReloadTableData, computedColumns, isShowErrMsg } = useColumns();
    const { artWycOptions, userOptions, ruleOptions, publishTypeOptions } = useCommonAsyncOptions();
    const { spinStyle, viewLoading: tableLoading } = useSpinLoadingState();
    // 时间筛选 预设
    const rangePresets = useDateRangePresets();
    // 搜索
    const domain = ref("");
    const ruleName = ref("");
    // 筛选
    const publishTypeId = ref("");
    const status = ref(1);
    const artWyc = ref(""),
        ruleType = ref(""),
        customIdentifier = ref(""),
        createId = ref("");
    const statusOptions: SelectOption = Array(2)
        .fill(1)
        .map((_, index) => ({ value: index, label: index === 0 ? "失败" : "成功" }));
    const searchLoading = ref(false);
    const total = ref(0);
    const tableData = ref<TableData>([]);
    const startAndEndDate = ref<any>([]);
    const size = ref(10);
    const page = ref(1);
    const title = ref("");

    // 获取数据
    const searchFunc = () => {
        tableLoading.value = true;
        // 时间范围
        let start_time = undefined;
        let end_time = undefined;
        if (startAndEndDate.value.length) {
            start_time = +new Date(startAndEndDate.value[0].$d);
            end_time = +new Date(startAndEndDate.value[1].$d);
        }
        publishedArticleApi(
            {
                status: status.value,
                size: size.value,
                page: page.value,
                publish_type: Number(publishTypeId.value) || undefined,
                ...sortObj,
                domain: domain.value,
                rule_name: ruleName.value,
                title: title.value,
                start_time,
                end_time,
                rule_type: Number(ruleType.value),
                custom_identifier: customIdentifier.value,
                create_id: Number(createId.value),
                wyc: artWyc.value
            },
            "get"
        )
            .then((res) => {
                if (res.data.code === 200) {
                    if (status.value === 0) {
                        isShowErrMsg.value = true;
                    } else {
                        isShowErrMsg.value = false;
                    }
                    total.value = res.data.count;
                    tableData.value = useDataFormat(res.data.data, artWycOptions, userOptions, ruleOptions, publishTypeOptions);
                } else {
                    message.error("加载失败");
                }
            })
            .finally(() => {
                searchLoading.value = false;
                isReloadTableData.value = false;
                tableLoading.value = false;
            });
    };
    // 当前页变化
    const pageChange = (pageNumber: number) => {
        page.value = pageNumber;
        searchFunc();
    };
    // 排序对象
    const sortObj = {
        sort_field: "",
        order: ""
    };
    // 表格排序发生改变
    const handleTableChange: TableProps["onChange"] = (pag, filters: any, sorter: any) => {
        if (sorter.order) {
            sortObj.order = sorter.order.slice(0, sorter.order.length - 3);
            sortObj.sort_field = sorter.field;
        } else {
            sortObj.order = "";
        }
        searchFunc();
    };
    // 今日文章总数
    const currentDaypublishedArticleTotal = ref(0);
    // 今日已发文章数
    const currentDaypublishedArticleNum = ref(0);
    // 今日应有队列总数
    const currentDayTaskNum = ref(0);
    const reloadSpin = ref(false);
    const onReload = () => {
        reloadSpin.value = true;
        dayPublishedArticleCountApi().then(({ data }) => {
            if (data.code === 200) {
                currentDaypublishedArticleTotal.value = data.total;
                currentDaypublishedArticleNum.value = data.remaining;
                reloadSpin.value = false;
                currentDayTaskNum.value = data.total2;
            }
        });
    };

    watch(isReloadTableData, () => {
        if (isReloadTableData.value) {
            searchFunc();
        }
    });
    onMounted(() => {
        searchFunc();
        onReload();
    });
</script>

<style scoped lang="scss"></style>
